<template>
  <div>
    <base-modal :width="modAlProps.width" :isVisible="props.isVisible" :title="modAlProps.title" :buttons="buttons"
      :isCancleBtn='isCancleBtn' @handleOk="buttonMessage" @handleCancle="isVisible = false" class="site_modal">
      <template v-slot:body>

        <VueCropper ref="cropperRef" :img="options.img" :info="true" :infoTrue="options.infoTrue"
          :auto-crop="options.autoCrop" :fixed-box="options.fixedBox" :fixedNumber="options.fixedNumber"
          :fixed="options.fixed" :centerBox="options.centerBox" @realTime="realTime">
        </VueCropper>
      </template>
    </base-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import baseModal from "@/components/modal/baseModal.vue";
import 'vue-cropper/dist/index.css'
import { VueCropper } from "vue-cropper";
import { scrollType, modeProp } from "@/type.d";
//interface
interface Options {
  [propName: string | number]: any;
}
// porps 
const props = defineProps({
  isVisible: {
    type: Boolean,
    default: false
  }
})
//data
//模态框数据
const modAlProps: modeProp = reactive({
  width: "M",
  title: "新建站点",
});
//模态框button按钮个数和文案修改
const isVisible = ref<Boolean>(false);  // 模态框是否可见
let buttons = ref<Options[]>([]);
let isCancleBtn = ref<Boolean>(false);

const options: Options = reactive({
  img: "", // 需要剪裁的图片
  autoCrop: true, // 是否默认生成截图框
  autoCropWidth: 150, // 默认生成截图框的宽度
  autoCropHeight: 150, // 默认生成截图框的长度
  fixedBox: false, // 是否固定截图框的大小 不允许改变
  info: true, // 裁剪框的大小信息
  outputSize: 0.5, // 裁剪生成图片的质量 [1至0.1]
  outputType: "jpeg", // 裁剪生成图片的格式
  canScale: false, // 图片是否允许滚轮缩放
  fixed: false, // 是否开启截图框宽高固定比例
  fixedNumber: [1, 1], // 截图框的宽高比例 需要配合centerBox一起使用才能生效
  full: true, // 是否输出原图比例的截图
  canMoveBox: false, // 截图框能否拖动
  original: false, // 上传图片按照原始比例渲染
  centerBox: true, // 截图框是否被限制在图片里面
  infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
});
const previews: any = ref({});
let fileItem = reactive({});
const cropperRef: any = ref({});
const dialogVisible = ref(false);
//method
// 触发点击事件
const uploadClick = () => {
  document.getElementById("fileBtn")?.click();
};
const onChange = (e: any) => {
  const file = e.target.files[0];
  fileItem = file;
  console.log("file:", file);
  const URL = window.URL || window.webkitURL;
  options.img = URL.createObjectURL(file);
  console.log("options.img:", options.img);
  dialogVisible.value = true;
};
const refreshCrop = () => {
  cropperRef.value.refresh();
};
// 上传图片（点击保存按钮）
const finish = () => {
  // cropperRef.value.getCropData((data: any) => {
  //   // console.log("获取截图的 base64 数据:", data);
  //   // data为base64图片，供接口使用
  // });
  cropperRef.value.getCropBlob((data: any) => {
    console.log("获取截图的 blob 数据:", data);
    // 下面是将blob转为formData
    let formData = new FormData();
    formData.append("file", data, new Date().getTime() + ".jpg");
    console.log("formData:", formData);
    // 下面是将blob转换为file
    data.lastModifiedDate = new Date(); // 文件最后的修改日期
    // let file = new File([data], fileItem?.name, {
    //   type: data.type,
    //   lastModified: Date.now(),
    // });
    // console.log("file:", file);
    // console.log("fileItem:", JSON.parse(JSON.stringify(fileItem)));
  });
  dialogVisible.value = false;
};
// 裁剪之后的数据
const realTime = (data: any) => {
  // console.log("realTime:", data);
  previews.value = data;
};
const buttonMessage = async (msg: Options) => { }
</script>

<style lang="less" scoped></style>
<style>
.vue-cropper {
  height: 500px !important;
}
</style>